<template>
    <div class="frontend-container">
      <!-- 左侧大屏显示区域 -->
      <div class="screen-section">
        <div class="screen-header">
          <h2>智慧小区监控大屏 - {{ currentAreaName }}</h2>
          <div class="screen-info">
            <!-- <span class="info-item">在线设备: {{ onlineDevices }}</span> -->
            <span class="info-item">总住户: {{ totalResidents }}</span>
            <!-- <span class="info-item">今日访客: {{ todayVisitors }}</span> -->
          </div>
        </div>
        
        <div class="community-map">
          <div class="map-container" ref="mapContainer">
            <!-- 楼栋显示 -->
            <div 
              v-for="building in buildings" 
              :key="building.id"
              class="building"
              :style="{
                left: building.x + '%',
                top: building.y + '%',
                backgroundColor: building.status === 'normal' ? '#4CAF50' : '#FF5722'
              }"
              @click="selectBuilding(building)"
              :class="{ 'selected': selectedBuilding?.id === building.id }"
            >
              <div class="building-info">
                <div class="building-name">{{ building.name }}</div>
                <div class="building-type">{{ building.type || '住宅' }}</div>
                <div class="building-status">{{ building.status === 'normal' ? '正常' : '异常' }}</div>
              </div>
            </div>
            
            <!-- 门禁显示 -->
            <div
              v-for="point in accessPoints"
              :key="point.id"
              class="access-point"
              :class="{ selected: selectedAccessPoint && selectedAccessPoint.id === point.id }"
              :style="{ left: point.x + '%', top: point.y + '%' }"
              @click="selectAccessPoint(point)"
            >
              <div class="door-frame"></div>
              <div class="door-handle"></div>
              <div class="access-name">{{ point.name }}</div>
            </div>
          </div>
          
          <!-- 图例 -->
          <div class="legend">
            <div class="legend-item">
              <div class="legend-color building"></div>
              <span>楼栋</span>
            </div>
            <div class="legend-item">
              <div class="legend-icon access"></div>
              <span>门禁</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧操作界面 -->
      <div class="control-section">
        <div class="control-header">
          <h3>小区管理控制台 - {{ currentAreaName }}</h3>
          <el-button type="primary" @click="refreshData">刷新数据</el-button>
        </div>
        
        <!-- 选中项信息 -->
        <div v-if="selectedBuilding || selectedAccessPoint" class="selected-info">
          <h4>选中项信息</h4>
          <div v-if="selectedBuilding" class="info-card">
            <h5>{{ selectedBuilding.name }}</h5>
            <p>状态: {{ selectedBuilding.status === 'normal' ? '正常' : '异常' }}</p>
            <p>类型: {{ selectedBuilding.type }}</p>
            <div class="info-item">
              <span class="info-label">住户数：</span>
              <span class="info-value">{{ selectedBuilding ? selectedBuilding.residentCount || 0 : 0 }}</span>
            </div>
            <p>建造年份: {{ selectedBuilding.year || '未知' }}</p>
            <p>描述: {{ selectedBuilding.description || '暂无描述' }}</p>
            <p>位置: ({{ selectedBuilding.x }}, {{ selectedBuilding.y }})</p>
            <el-button size="small" @click="viewBuildingDetails(selectedBuilding)">查看详情</el-button>
          </div>
          <div v-if="selectedAccessPoint" class="info-card">
            <h5>{{ selectedAccessPoint.name }}</h5>
            <p>状态: {{ selectedAccessPoint.status }}</p>
            <p>总通行: {{ selectedAccessPoint.totalPass || 0 }}</p>
            <div class="info-item">
              <span class="info-label">描述：</span>
              <span class="info-value">{{ selectedAccessPoint ? selectedAccessPoint.description || '暂无描述' : '暂无描述' }}</span>
            </div>
            <p>位置: ({{ selectedAccessPoint.x }}, {{ selectedAccessPoint.y }})</p>
            <el-button size="small" @click="viewAccessDetails(selectedAccessPoint)">查看详情</el-button>
          </div>
        </div>
        
        <!-- 快速操作 -->
        <div class="quick-actions">
          <h4>快速操作</h4>
          <div class="action-grid">
            <el-select 
              v-model="selectedAreaId" 
              placeholder="请选择小区" 
              @change="handleAreaChange"
              style="width: 200px; margin-bottom: 15px;"
            >
              <el-option
                v-for="area in areaList"
                :key="area.id"
                :label="area.aname"
                :value="area.id"
              />
            </el-select>
            
            <!-- 功能切换 -->
            <!-- <div class="function-switcher">
              <div class="function-tabs">
                <div 
                  class="function-tab" 
                  :class="{ active: currentFunction === 'community' }"
                  @click="switchFunction('community')"
                >
                  <i class="el-icon-office-building"></i>
                  <span>智慧社区管理</span>
                </div>
                <div 
                  class="function-tab" 
                  :class="{ active: currentFunction === 'safety' }"
                  @click="switchFunction('safety')"
                >
                  <i class="el-icon-warning"></i>
                  <span>安全隐患上报</span>
                </div>
                <div 
                  class="function-tab" 
                  :class="{ active: currentFunction === 'resident' }"
                  @click="switchFunction('resident')"
                >
                  <i class="el-icon-user"></i>
                  <span>住户人员添加</span>
                </div>
              </div>
            </div> -->
          </div>
        </div>
        
        <!-- 小区统计 -->
        <div class="statistics">
          <h4>小区统计</h4>
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-number">{{ totalBuildings }}</div>
              <div class="stat-label">楼栋总数</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ totalAccessPoints }}</div>
              <div class="stat-label">门禁总数</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ totalResidents }}</div>
              <div class="stat-label">总住户数</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ totalAccessCount }}</div>
              <div class="stat-label">总出入数</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 门禁通行记录弹窗 -->
      <el-dialog 
        v-model="accessRecordDialogVisible" 
        :title="`${selectedAccessPoint?.name || '门禁'} - 通行记录`"
        width="90%"
        :before-close="handleCloseAccessRecordDialog"
      >
        <div class="access-record-container">
          <div class="record-header">
            <el-button type="primary" @click="refreshAccessRecords">刷新记录</el-button>
            <span class="record-count">共 {{ accessRecords.length }} 条记录</span>
          </div>
          
          <el-table :data="accessRecords" style="width: 100%" max-height="500">
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="ibName" label="人员姓名" min-width="120" />
            <el-table-column prop="carNo" label="车牌号" min-width="120">
              <template #default="scope">
                <span v-if="scope.row.carNo">{{ scope.row.carNo }}</span>
                <span v-else class="no-car">步行</span>
              </template>
            </el-table-column>
            <el-table-column prop="accessTime" label="通行时间" min-width="180">
              <template #default="scope">
                {{ scope.row.accessTime ? new Date(scope.row.accessTime).toLocaleString('zh-CN') : '' }}
              </template>
            </el-table-column>
            <el-table-column prop="enterTime" label="进入时间" min-width="180">
              <template #default="scope">
                {{ scope.row.enterTime ? new Date(scope.row.enterTime).toLocaleString('zh-CN') : '' }}
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" min-width="100">
              <template #default="scope">
                <el-tag :type="scope.row.type === '1' ? 'success' : 'warning'">
                  {{ scope.row.type === '1' ? '进入' : '离开' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="state" label="状态" min-width="100">
              <template #default="scope">
                <el-tag :type="scope.row.state === 1 ? 'success' : 'danger'">
                  {{ scope.row.state === 1 ? '正常' : '异常' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
        <template #footer>
          <el-button @click="accessRecordDialogVisible = false">关闭</el-button>
        </template>
      </el-dialog>
      
      <!-- 楼栋房屋信息弹窗 -->
      <el-dialog 
        v-model="houseDialogVisible" 
        :title="`${selectedBuilding?.name || '楼栋'} - 房屋信息`"
        width="90%"
        :before-close="handleCloseHouseDialog"
      >
        <div class="house-container">
          <div class="house-header">
            <el-button type="primary" @click="refreshHouses">刷新房屋信息</el-button>
            <span class="house-count">共 {{ houses.length }} 套房屋</span>
          </div>
          
          <el-table :data="houses" style="width: 100%" max-height="500">
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="hnum" label="房屋编号" min-width="120" />
            <el-table-column prop="htype" label="房屋类型" min-width="120" />
            <el-table-column prop="hsize" label="面积(㎡)" min-width="100">
              <template #default="scope">
                {{ scope.row.hsize }}㎡
              </template>
            </el-table-column>
            <el-table-column prop="ibName" label="住户姓名" min-width="120" />
            <el-table-column prop="hstate" label="状态" min-width="100">
              <template #default="scope">
                <el-tag :type="scope.row.hstate === 1 ? 'success' : 'warning'">
                  {{ scope.row.hstate === 1 ? '已入住' : '空置' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="bname" label="所属楼栋" min-width="120" />
          </el-table>
        </div>
        
        <template #footer>
          <el-button @click="houseDialogVisible = false">关闭</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted, computed } from 'vue';
  import { ElMessage } from 'element-plus';
  import { postRequest, getRequest } from '@/utils/request';
  
  // 响应式数据
  const mapContainer = ref(null);
  const selectedBuilding = ref(null);
  const selectedAccessPoint = ref(null);
  
  // 门禁通行记录相关
  const accessRecordDialogVisible = ref(false);
  const accessRecords = ref([]);
  
  // 楼栋房屋信息相关
  const houseDialogVisible = ref(false);
  const houses = ref([]);
  
  // 小区相关数据
  const areaList = ref([]);
  const selectedAreaId = ref(null);
  
  // 计算当前小区名称
  const currentAreaName = computed(() => {
    if (!selectedAreaId.value) return '未选择小区';
    const area = areaList.value.find(area => area.id === selectedAreaId.value);
    console.log(area);
    console.log(selectedAreaId.value);
    
    
    return area ? area.aname : '未知小区';
  });
  
  // 统计数据
  const onlineDevices = ref(156);
  const totalResidents = ref(1248);
  // const todayVisitors = ref(89);
  const totalBuildings = ref(12);
  const totalAccessPoints = ref(8);
  const totalAccessCount = ref(0); // 总出入数
  
  // 楼栋数据
  const buildings = ref([]);
  
  // 门禁数据
  const accessPoints = ref([]);
  
  // 功能切换相关
  // const currentFunction = ref('community'); // 当前选中的功能
  
  // 方法
  const selectBuilding = async (building) => {
    selectedBuilding.value = building;
    selectedAccessPoint.value = null;
    
    // 获取该楼栋的最新住户数
    try {
      const response = await postRequest('/house/getHouseByBuildingId', {
        bid: building.id,
        current: 1,
        size: 100
      });
      
      if (response.data.code === 200) {
        selectedBuilding.value.residentCount = response.data.data ? response.data.data.length : 0;
      }
    } catch (error) {
      console.error('获取楼栋住户数失败:', error);
    }
  };
  
  const selectAccessPoint = async (access) => {
    selectedAccessPoint.value = access;
    selectedBuilding.value = null;
    
    // 获取该门禁的最新总通行记录数
    try {
      const response = await postRequest('/userAccessRecord/getUserAccessRecordByPointAndPage', {
        pid: access.id,
        current: 1,
        size: 1000 // 获取更多记录来计算总数
      });
      
      if (response.data.code === 200) {
        selectedAccessPoint.value.totalPass = response.data.data ? response.data.data.length : 0;
      }
    } catch (error) {
      console.error('获取门禁总通行数失败:', error);
      selectedAccessPoint.value.totalPass = 0;
    }
  };
  
  const viewBuildingDetails = async (building) => {
    try {
      // 获取该楼栋的房屋信息
      const response = await postRequest('/house/getHouseByBuildingId', {
        bid: building.id,
        current: 1,
        size: 100
      });
      
      if (response.data.code === 200) {
        houses.value = response.data.data || [];
        
        // 更新选中楼栋的住户数
        if (selectedBuilding.value && selectedBuilding.value.id === building.id) {
          selectedBuilding.value.residentCount = houses.value.length;
        }
        
        houseDialogVisible.value = true;
      } else {
        ElMessage.error('获取房屋信息失败');
      }
    } catch (error) {
      console.error('获取房屋信息失败:', error);
      ElMessage.error('获取房屋信息失败');
    }
  };
  
  const viewAccessDetails = async (access) => {
    try {
      // 获取该门禁的通行记录
      const response = await postRequest('/userAccessRecord/getUserAccessRecordByPointAndPage', {
        pid: access.id,
        current: 1,
        size: 100
      });
      
      if (response.data.code === 200) {
        accessRecords.value = response.data.data || [];
        accessRecordDialogVisible.value = true;
      } else {
        ElMessage.error('获取通行记录失败');
      }
    } catch (error) {
      console.error('获取通行记录失败:', error);
      ElMessage.error('获取通行记录失败');
    }
  };
  
  const refreshData = async () => {
    try {
      // 如果没有选中小区，先获取小区列表
      if (!selectedAreaId.value && areaList.value.length === 0) {
        await fetchAreaList();
      }
      
      // 获取楼栋数据（可以根据小区ID筛选）
      const buildingResponse = await getRequest(`/building/getBuildingByAreaId/${selectedAreaId.value}`);
      
      if (buildingResponse.data.code === 200 && buildingResponse.data.data) {
        // 处理单个楼栋数据或楼栋数组
        let buildingData = buildingResponse.data.data;
        
        // 如果返回的是单个对象，转换为数组
        if (!Array.isArray(buildingData)) {
          buildingData = [buildingData];
        }
        
        buildings.value = buildingData.map(building => ({
          id: building.id,
          name: building.blName || `楼栋${building.id}`,
          x: building.x || 50, // 使用数据库中的x坐标，如果没有则使用默认值50
          y: building.y || 50, // 使用数据库中的y坐标，如果没有则使用默认值50
          status: building.blState === 1 ? 'normal' : 'alert',
          residents: building.blDesc ? parseInt(building.blDesc.match(/\d+/)?.[0] || '80') : 80,
          type: building.blType || '住宅',
          year: building.blYear || '',
          description: building.blDesc || '',
          residentCount: 0 // 初始化为0，稍后通过API获取
        }));
        
        // 获取每个楼栋的房屋信息来计算准确的住户数
        for (let building of buildings.value) {
          try {
            const houseResponse = await postRequest('/house/getHouseByBuildingId', {
              bid: building.id,
              current: 1,
              size: 100
            });
            
            if (houseResponse.data.code === 200) {
              building.residentCount = houseResponse.data.data ? houseResponse.data.data.length : 0;
            }
          } catch (error) {
            console.error(`获取楼栋${building.id}房屋信息失败:`, error);
            building.residentCount = 0;
          }
        }
      }
      
      // 获取门禁数据（可以根据小区ID筛选）
      const pointResponse = await getRequest(`/point/getPointByAreaId/${selectedAreaId.value}`);
      
      if (pointResponse.data.code === 200 && pointResponse.data.data) {
        const pointData = pointResponse.data.data || [];
        accessPoints.value = pointData.map(point => ({
          id: point.id,
          name: point.pname || `门禁${point.id}`,
          x: point.px || 50, // 使用数据库中的px坐标，如果没有则使用默认值50
          y: point.py || 50, // 使用数据库中的py坐标，如果没有则使用默认值50
          status: point.status || '正常',
          totalPass: 0 // 初始化为0，稍后通过API获取
        }));
        
        // 获取每个门禁的总通行记录数
        for (let accessPoint of accessPoints.value) {
          try {
            const accessResponse = await postRequest('/userAccessRecord/getUserAccessRecordByPointAndPage', {
              pid: accessPoint.id,
              current: 1,
              size: 1000 // 获取更多记录来计算总数
            });
            
            if (accessResponse.data.code === 200) {
              accessPoint.totalPass = accessResponse.data.data ? accessResponse.data.data.length : 0;
            }
          } catch (error) {
            console.error(`获取门禁${accessPoint.id}通行记录失败:`, error);
            accessPoint.totalPass = 0;
          }
        }
        
        console.log(accessPoints.value,'0000000000000000000000000000');
      }
      
      // 获取住户数据（可以根据小区ID筛选）
      // 暂时注释掉，因为不再显示人员
      // const residentResponse = await postRequest('/inhabitants/getInhabitantsByPage', { 
      //   current: 1, 
      //   size: 100,
      //   areaId: selectedAreaId.value
      // });
      
      // 更新统计数据
      totalBuildings.value = buildings.value.length;
      totalAccessPoints.value = accessPoints.value.length;
      console.log(totalAccessPoints.value);
      console.log(accessPoints.value);
      
      // 计算总住户数（所有楼栋的房屋总数）
      const totalResidentsCount = buildings.value.reduce((total, building) => {
        return total + (building.residentCount || 0);
      }, 0);
      totalResidents.value = totalResidentsCount;
      
      // 计算总出入数（所有门禁的通行记录总数）
      let totalAccessRecords = 0;
      for (let accessPoint of accessPoints.value) {
        try {
          const accessResponse = await postRequest('/userAccessRecord/getUserAccessRecordByPointAndPage', {
            pid: accessPoint.id,
            current: 1,
            size: 1000 // 获取更多记录来计算总数
          });
          
          if (accessResponse.data.code === 200) {
            console.log(accessResponse.data.data);
            
            totalAccessRecords += accessResponse.data.data ? accessResponse.data.data.length : 0;
          }
        } catch (error) {
          console.error(`获取门禁${accessPoint.id}通行记录失败:`, error);
        }
      }
      totalAccessCount.value = totalAccessRecords;
      
      onlineDevices.value = totalBuildings.value + totalAccessPoints.value;
      
      ElMessage.success('数据刷新成功');
    } catch (error) {
      console.error('数据刷新失败:', error);
      ElMessage.error('数据刷新失败');
    }
  };
  
  // 获取小区列表
  const fetchAreaList = async () => {
    try {
      const response = await getRequest('/area/getAreaLists');
      if (response.data.code === 200) {
        areaList.value = response.data.data || [];
        // 如果有小区数据，默认选择第一个
        if (areaList.value.length > 0 && !selectedAreaId.value) {
          selectedAreaId.value = areaList.value[0].id;
        }
      }
    } catch (error) {
      console.error('获取小区列表失败:', error);
      ElMessage.error('获取小区列表失败');
    }
  };
  
  // 处理小区切换
  const handleAreaChange = async (areaId) => {
    if (!areaId) return;
    
    try {
      ElMessage.success(`已切换到小区: ${areaList.value.find(area => area.id === areaId)?.aname}`);
      
      // 根据选中的小区ID重新获取相关数据
      await refreshData();
    } catch (error) {
      console.error('切换小区失败:', error);
      ElMessage.error('切换小区失败');
    }
  };
  
  // 刷新通行记录
  const refreshAccessRecords = async () => {
    if (!selectedAccessPoint.value) return;
    
    try {
      const response = await postRequest('/userAccessRecord/getUserAccessRecordByPointAndPage', {
        pid: selectedAccessPoint.value.id,
        current: 1,
        size: 100
      });
      
      if (response.data.code === 200) {
        accessRecords.value = response.data.data || [];
        ElMessage.success('通行记录已刷新');
      } else {
        ElMessage.error('刷新通行记录失败');
      }
    } catch (error) {
      console.error('刷新通行记录失败:', error);
      ElMessage.error('刷新通行记录失败');
    }
  };
  
  // 关闭通行记录弹窗
  const handleCloseAccessRecordDialog = () => {
    accessRecordDialogVisible.value = false;
    accessRecords.value = [];
  };
  
  // 刷新房屋信息
  const refreshHouses = async () => {
    if (!selectedBuilding.value) return;
    
    try {
      const response = await postRequest('/house/getHouseByBuildingId', {
        bid: selectedBuilding.value.id,
        current: 1,
        size: 100
      });
      
      if (response.data.code === 200) {
        houses.value = response.data.data || [];
        
        // 更新选中楼栋的住户数
        selectedBuilding.value.residentCount = houses.value.length;
        
        ElMessage.success('房屋信息已刷新');
      } else {
        ElMessage.error('刷新房屋信息失败');
      }
    } catch (error) {
      console.error('刷新房屋信息失败:', error);
      ElMessage.error('刷新房屋信息失败');
    }
  };
  
  // 关闭房屋信息弹窗
  const handleCloseHouseDialog = () => {
    houseDialogVisible.value = false;
    houses.value = [];
  };
  
  // 模拟实时数据更新
  let dataInterval;
  onMounted(() => {
    // 页面加载时获取小区列表
    fetchAreaList();
    
    // 页面加载时获取数据
    refreshData();
    
    // 模拟实时数据更新
    dataInterval = setInterval(() => {
      // 移除人员位置更新，因为不再显示人员
    }, 3000);
  });
  
  onUnmounted(() => {
    if (dataInterval) {
      clearInterval(dataInterval);
    }
  });
  
  // 功能切换方法
  // const switchFunction = (functionType) => {
  //   currentFunction.value = functionType;
    
  //   switch (functionType) {
  //     case 'safety':
  //       // 跳转到安全隐患上报页面
  //       window.open('/safety-report', '_blank');
  //       break;
  //     case 'resident':
  //       // 跳转到住户人员添加页面
  //       window.open('/resident-add', '_blank');
  //       break;
  //     case 'community':
  //     default:
  //       // 保持在当前智慧社区管理页面
  //       break;
  //   }
  // };
  </script>
  
  <style scoped>
  .frontend-container {
    display: flex;
    height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  /* 左侧大屏区域 */
  .screen-section {
    flex: 2;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  
  .screen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
  }
  
  .screen-header h2 {
    margin: 0;
    font-size: 24px;
    color: #fff;
  }
  
  .screen-info {
    display: flex;
    gap: 20px;
  }
  
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }
  
  .info-label {
    font-weight: bold;
    color: #409eff;
    margin-right: 8px;
    min-width: 60px;
  }
  
  .info-value {
    color: #333;
  }
  
  .community-map {
    flex: 1;
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    overflow: hidden;
  }
  
  .map-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: linear-gradient(45deg, #2c3e50, #34495e);
    border-radius: 15px;
  }
  
  /* 楼栋样式 */
  .building {
    position: absolute;
    width: 80px;
    height: 50px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.2);
  }
  
  .building:hover {
    transform: scale(1.15);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.4);
  }
  
  .building.selected {
    border: 3px solid #ffd700;
    transform: scale(1.15);
    box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3);
  }
  
  .building-info {
    text-align: center;
    color: white;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  }
  
  .building-name {
    font-size: 9px;
    margin-bottom: 3px;
    font-weight: 600;
  }
  
  .building-type {
    font-size: 7px;
    opacity: 0.9;
    margin-bottom: 2px;
  }
  
  .building-status {
    font-size: 7px;
    opacity: 0.9;
  }
  
  /* 门禁样式 */
  .access-point {
    position: absolute;
    width: 40px;
    height: 60px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border: 2px solid #2c5aa0;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    box-shadow: 
      0 4px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    transform: perspective(100px) rotateX(5deg);
  }
  
  .access-point::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #4facfe, #00f2fe, #4facfe);
    border-radius: 8px 8px 0 0;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .access-point:hover {
    transform: perspective(100px) rotateX(5deg) scale(1.1);
    box-shadow: 
      0 8px 16px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  }
  
  .access-point:hover::before {
    opacity: 1;
  }
  
  .access-point.selected {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
    border-color: #d63031;
    box-shadow: 
      0 6px 12px rgba(214, 48, 49, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    transform: perspective(100px) rotateX(5deg) scale(1.05);
  }
  
  .access-point.selected::before {
    background: linear-gradient(45deg, #ff6b6b, #ff8e8e, #ff6b6b);
    opacity: 1;
  }
  
  .access-point .door-handle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 12px;
    background: linear-gradient(90deg, #ffd700, #ffed4e);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  
  .access-point .door-frame {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px 6px 0 0;
    pointer-events: none;
  }
  
  .access-point .access-name {
    font-size: 9px;
    color: white;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 600;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  /* 图例 */
  .legend {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.85);
    padding: 18px;
    border-radius: 12px;
    display: flex;
    gap: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  
  .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #fff;
    font-weight: 500;
  }
  
  .legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    margin-right: 8px;
  }
  
  .legend-color.building {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  .building-normal {
    background-color: #4CAF50;
  }
  
  .building-alert {
    background-color: #FF5722;
  }
  
  .access-point {
    background-color: #2196F3;
    border-radius: 50%;
  }
  
  /* 右侧控制区域 */
  .control-section {
    flex: 1;
    background: white;
    padding: 20px;
    overflow-y: auto;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
  }
  
  .control-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
  }
  
  .control-header h3 {
    margin: 0;
    color: #333;
  }
  
  /* 选中项信息 */
  .selected-info {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid #007bff;
  }
  
  .selected-info h4 {
    margin: 0 0 15px 0;
    color: #333;
  }
  
  .info-card {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .info-card h5 {
    margin: 0 0 10px 0;
    color: #007bff;
  }
  
  .info-card p {
    margin: 5px 0;
    color: #666;
  }
  
  /* 快速操作 */
  .quick-actions {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
  }
  
  .quick-actions h4 {
    margin: 0 0 15px 0;
    color: #333;
  }
  
  .action-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  /* 小区统计 */
  .statistics {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
  }
  
  .statistics h4 {
    margin: 0 0 15px 0;
    color: #333;
  }
  
  .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  
  .stat-item {
    background: white;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 5px;
  }
  
  .stat-label {
    font-size: 12px;
    color: #666;
  }
  
  /* 通行记录弹窗样式 */
  .access-record-container {
    padding: 10px 0;
  }
  
  .record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
  }
  
  .record-count {
    font-size: 14px;
    color: #666;
    font-weight: bold;
  }
  
  .no-car {
    color: #999;
    font-style: italic;
  }
  
  /* 房屋信息弹窗样式 */
  .house-container {
    padding: 10px 0;
  }
  
  .house-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
  }
  
  .house-count {
    font-size: 14px;
    color: #666;
    font-weight: bold;
  }
  
  /* 表格样式优化 */
  :deep(.el-dialog__body) {
    padding: 20px;
  }
  
  :deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  :deep(.el-table__header-wrapper) {
    background: #f5f7fa;
  }
  
  :deep(.el-table__header th) {
    background: #f5f7fa;
    color: #606266;
    font-weight: 600;
    border-bottom: 1px solid #ebeef5;
  }
  
  :deep(.el-table__body tr:hover) {
    background-color: #f5f7fa;
  }
  
  :deep(.el-table__body td) {
    border-bottom: 1px solid #ebeef5;
  }
  
  :deep(.el-table__empty-block) {
    min-height: 200px;
  }
  
  :deep(.el-table__empty-text) {
    color: #909399;
    font-size: 14px;
  }
  
  /* 响应式设计 */
  @media (max-width: 1200px) {
    .frontend-container {
      flex-direction: column;
    }
    
    .screen-section {
      flex: 1;
      min-height: 60vh;
    }
    
    .control-section {
      flex: 1;
    }
  }
  
  .legend-item .legend-icon.access {
    width: 20px;
    height: 30px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border: 1px solid #2c5aa0;
    border-radius: 4px 4px 0 0;
    position: relative;
  }
  
  .legend-item .legend-icon.access::after {
    content: '';
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 6px;
    background: linear-gradient(90deg, #ffd700, #ffed4e);
    border-radius: 1.5px;
  }
  
  /* 功能切换样式 */
  .function-switcher {
    width: 100%;
    max-width: 400px;
  }
  
  .function-tabs {
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
  }
  
  .function-tabs::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
      radial-gradient(circle at 80% 40%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
      radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 20px 20px, 30px 30px, 25px 25px;
    pointer-events: none;
    animation: particleFloat 20s infinite linear;
  }
  
  @keyframes particleFloat {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-20px); }
  }
  
  .function-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    color: #666;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    min-height: 60px;
  }
  
  .function-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .function-tab::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    pointer-events: none;
  }
  
  .function-tab:hover {
    transform: translateY(-2px) scale(1.02);
    color: #333;
    box-shadow: 
      0 8px 25px rgba(0, 0, 0, 0.15),
      0 4px 10px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  
  .function-tab:hover::before {
    opacity: 1;
  }
  
  .function-tab:hover::after {
    width: 100px;
    height: 100px;
    animation: ripple 0.6s ease-out;
  }
  
  @keyframes ripple {
    0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(2);
      opacity: 0;
    }
  }
  
  .function-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 
      0 6px 20px rgba(102, 126, 234, 0.4),
      0 2px 8px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  
  .function-tab.active::before {
    opacity: 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  }
  
  .function-tab i {
    font-size: 18px;
    margin-bottom: 4px;
    transition: all 0.3s ease;
  }
  
  .function-tab:hover i {
    transform: scale(1.1);
  }
  
  .function-tab.active i {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }
  
  .function-tab span {
    font-size: 11px;
    line-height: 1.2;
    transition: all 0.3s ease;
  }
  
  .function-tab:hover span {
    transform: translateY(-1px);
  }
  
  .function-tab.active span {
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  </style> 